<template>
  <div :style="{ width: '100%', height: '100%' }">
    <div @click="goBackClick" :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginTop: (28 / 96) + 'rem', marginLeft: (28 / 96) + 'rem', marginBottom: (35 / 96) + 'rem', cursor: 'pointer' }">
      <div :style="{ width: (37 / 96) + 'rem', height: (49 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', marginRight: (4 / 96) + 'rem' }">
        <img style="width: 100%; height: 100%;" src="../../../static/back.png" />
      </div>
      <span :style="{ fontSize: (30 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#999999', lineHeight: (24 / 96) + 'rem', cursor: 'pointer' }">返回</span>
    </div>
    <div :style="{ width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginBottom: (12 / 96) + 'rem' }">
      <span :style="{ fontSize: (30 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem' }">修改密码</span>
    </div>
    <div :style="{ width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', marginBottom: (38 / 96) + 'rem' }">
      <div :style="{ width: '97.68%', height: (1 / 96) + 'rem', background: '#EEEEEE', }"></div>
    </div>
    <div :style="{ width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }">
      <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginBottom: (24 / 96) + 'rem' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">手机号</span>
        <div :style="{ width: (610 / 96) + 'rem', height: (53 / 96) + 'rem', background: '#EEEEEE', border: (1 / 96) +'rem solid #CCCCCC', borderRadius: (4 / 96) + 'rem', marginLeft: (29 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
          <input :style="{ width: (542 / 96) + 'rem', height: '100%', fontSize: (24 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem', marginLeft: (34 / 96) + 'rem', marginRight: (34 / 96) + 'rem' }" placeholder="输入原手机号" v-model="phoneNum" />
        </div>
      </div>
      <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginBottom: (24 / 96) + 'rem' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">验证码</span>
        <div :style="{ width: (441 / 96) + 'rem', height: (53 / 96) + 'rem', background: '#EEEEEE', border: (1 / 96) +'rem solid #CCCCCC', borderRadius: (4 / 96) + 'rem', marginLeft: (29 / 96) + 'rem', marginRight: (7 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
          <input :style="{ width: (373 / 96) + 'rem', height: '100%', fontSize: (24 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem', marginLeft: (34 / 96) + 'rem', marginRight: (34 / 96) + 'rem' }" placeholder="输入验证码" v-model="vfcode" />
        </div>
        <vf-code :valueText="phoneNum" :valueType="1" :valueMsg="phoneMsg" @getCode="getCode"></vf-code>
      </div>
      <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginBottom: (24 / 96) + 'rem' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">新密码</span>
        <div :style="{ width: (610 / 96) + 'rem', height: (53 / 96) + 'rem', background: '#EEEEEE', border: (1 / 96) +'rem solid #CCCCCC', borderRadius: (4 / 96) + 'rem', marginLeft: (29 / 96) + 'rem',display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
          <input :type="newType" :style="{ width: (452 / 96) + 'rem', height: '100%', fontSize: (24 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem', marginLeft: (34 / 96) + 'rem', marginRight: (34 / 96) + 'rem' }" placeholder="新密码(字母开头6~18位含字母数字下划线)" v-model="newPassword" />
          <div @click="onNewPasswordClick" :style="{ width: (80 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
            <i v-if="!showNewPassword" class="iconfont iconguanbixianshi" :style="{ fontSize: (30 / 96) + 'rem', color: '#999999' }"></i>
            <i v-if="showNewPassword" class="iconfont iconxianshi" :style="{ fontSize: (30 / 96) + 'rem', color: '#999999' }"></i>
          </div>
        </div>
      </div>
      <div :style="{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginBottom: (41 / 96) + 'rem' }">
        <span :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#666666', lineHeight: (24 / 96) + 'rem' }">新密码</span>
        <div :style="{ width: (610 / 96) + 'rem', height: (53 / 96) + 'rem', background: '#EEEEEE', border: (1 / 96) +'rem solid #CCCCCC', borderRadius: (4 / 96) + 'rem', marginLeft: (29 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
          <input :type="okNewType" :style="{ width: (452 / 96) + 'rem', height: '100%', fontSize: (24 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#333333', lineHeight: (24 / 96) + 'rem', marginLeft: (34 / 96) + 'rem', marginRight: (34 / 96) + 'rem' }" placeholder="确定新密码" v-model="okNewPassword" />
          <div @click="onOkNewPasswordClick" :style="{ width: (80 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
            <i v-if="!showOkNewPassword" class="iconfont iconguanbixianshi" :style="{ fontSize: (30 / 96) + 'rem', color: '#999999' }"></i>
            <i v-if="showOkNewPassword" class="iconfont iconxianshi" :style="{ fontSize: (30 / 96) + 'rem', color: '#999999' }"></i>
          </div>
        </div>
      </div>
      <div @click="onChangePasswordClick" :style="{ width: (185 / 96) + 'rem', height: (42 / 96) + 'rem', background: '#6168FE', borderRadius: (19 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
        <span :style="{ fontSize: (26 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#FEFEFE', lineHeight: (24 / 96) + 'rem' }">确定修改</span>
      </div>
    </div>
  </div>
</template>

<script>
  import  {pageResize} from '../../utils/resetScreenSize.js'
  import MatchList from '../../components/MatchList'
  import Search from '../../components/Search'
  import Tab from '../../components/Tab'
  import VfCode from '../../components/VfCode/index.vue'
  import commonUtil from '../../utils/common.js'
  export default {
    name: 'MatchPage',
    components: {
      MatchList: MatchList,
      Search: Search,
      Tab: Tab,
      VfCode: VfCode
    },
    data() {
      return {
        newPassword: "",
        okNewPassword: "",
        showNewPassword: false,
        showOkNewPassword: false,
        newType: 'password',
        okNewType: 'password',
        phoneNum: "",
        vfcode: "",
        phoneMsg: "原手机号码格式不正确",
        vfcodeMsg: "请输入验证码"
      }
    },
    mounted() {
      pageResize();
    },
    beforeDestroy() {
      window.document.title = '账号安全';
    },
    methods: {
      goBackClick() {
        this.$router.back();
      },
      onNewPasswordClick() {
        this.showNewPassword = !this.showNewPassword;
        this.newType = this.showNewPassword  ? 'text' : 'password';
      },
      onOkNewPasswordClick() {
        this.showOkNewPassword = !this.showOkNewPassword;
        this.okNewType = this.showOkNewPassword  ? 'text' : 'password';
      },
      onChangePasswordClick() {
        if(!commonUtil.checkMobile(commonUtil.trim(this.phoneNum))) {
          this.$toast(this.phoneMsg);
          return;
        }
        if(!commonUtil.trim(this.vfcode)) {
          this.$toast(this.vfcodeMsg);
          return;
        }
        if(!commonUtil.checkPassword(commonUtil.trim(this.newPassword))) {
          this.$toast("新密码格式错误");
          return;
        }
        if(commonUtil.trim(this.newPassword) != commonUtil.trim(this.okNewPassword)) {
          this.$toast("确认密码跟新密码不一致");
          return;
        }
        // 接口调用
        let jsons = {
            mobile: commonUtil.trim(this.phoneNum),
            msgCode: commonUtil.trim(this.vfcode),
            password: commonUtil.trim(this.newPassword),
            isJson: true
        };
        this.$http.post('/user/forgetUpdatePsw', jsons).then((res) => {
          if(res.code == 200) {
              console.log("res: ", res);
          } else {
            this.$toast(res.msg);
          }
        }).catch(e => {
          // console.log("e: ", e);
        });
      },
      getCode() {
        console.log("getCode");
        let jsons = {
            phone: commonUtil.trim(this.phoneNum),
            type: 2
        };
        this.$http.post('/code/msgCode', jsons).then((res) => {
          if(res.code == 200) {
              console.log("res: ", res);
          } else {
            this.$toast(res.msg);
          }
        }).catch(e => {
          // console.log("e: ", e);
        });
      }
    },
    activated () {
      window.document.title = '忘记密码';
    }
  }
</script>

<style scoped>
  :-moz-placeholder {
    fontFamily: "FZKai-Z03S, KaiTi";
    fontWeight: 400;
    color: #999999;
    opacity: 1;
  }

  ::-moz-placeholder {
    fontFamily: "FZKai-Z03S, KaiTi";
    fontWeight: 400;
    color: #999999;
    opacity: 1;
  }

  input:-ms-input-placeholder {
    fontFamily: "FZKai-Z03S, KaiTi";
    fontWeight: 400;
    color: #999999;
    opacity: 1;
  }

  input::-webkit-input-placeholder {
    fontFamily: "FZKai-Z03S, KaiTi";
    fontWeight: 400;
    color: #999999;
    opacity: 1;
  }
</style>
